<template>
    <div class="flex">
        <div class="table" style="width: 100%">
            <Search :formState="formState" @searchData="onSearchList" />
            <!-- <Test></Test> -->
            <a-card>
                <a-table
                    :pagination="{
                        pageSize: formState.pageSize,
                        total: total,
                        showTotal: (total: Number) => `共${total}条记录`,
                        size: 'middle',
                    }"
                    :rowKey="(record: any) => record.id"
                    :columns="columns"
                    :data-source="repositories"
                    size="middle"
                    :loading="tableLoading"
                    @change="handleTableChange"
                >
                    <template #sjdxms="{ text: row }">
                        <SnippetsOutlined />
                        {{ row.sjdxms }}
                    </template>
                    <template #ywlxmc="{ record }">
                        {{
                            record.ywlxmc
                                ? record.ywlxmc
                                : onHandleCode(record.ywlxid)
                        }}
                    </template>
                    <template #ismatch="{ record }">
                        <a-tag :color="tagColor(record.issync)">
                            {{
                                record.ismatch === "0"
                                    ? "未匹配"
                                    : record.ismatch === "1"
                                        ? "已匹配"
                                        : record.ismatch === "2"
                                            ? "匹配中"
                                            : "匹配失败"
                            }}
                        </a-tag>
                    </template>
                    <template #operation="{ text: row }">
                        <span v-if="row.ismatch !== '2'">
                            <a-popconfirm
                                title="确认启动?"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="onHandleMatch(row.id,)"
                            >
                                <a-tag color="#108ee9">启动匹配</a-tag>
                            </a-popconfirm>
                        </span>
                        <span v-else>
                            <a-tag color="red">地址匹配中</a-tag>
                        </span>
                        <a-tag @click="onPreview(row.sjdxmc)">预览</a-tag>
                    </template>
                </a-table>
            </a-card>
            <Modal
                :visible="visible"
                :loading="loading"
                :title="title"
                :row="row"
                :type="type"
                :userList="userList"
                :tableNameList="tableNameList"
                :dataSource="dataSource"
                :createColumns="createColumns"
                @handleOk="onHandleConfirm"
                @handleCancel="onHandleCancel"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { TableStateFilters } from "ant-design-vue/es/table/interface";
import * as API from "@/api/data-object";
import { SnippetsOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, toRefs, onMounted, UnwrapRef } from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import Modal from "@/components/modal/ModalO.vue";
import Search from "./components/search.vue";
import Test from "./components/test";
import { message } from "ant-design-vue";
import { onHandleCode, tagColor } from "@/filter/index";
interface FormState {
    sjyid: string;
    ywlxid: string;
    sjdxmc: string;
    sjdxms: string;
    sjylx: string;
    sjyfl: string;
    pageSize: number;
    pageNum: number;
    orderByColumn: string;
    isAsc: string;
    isprehandle: string;
}
const columns = [
    {
        title: "数据表中文名",
        slots: { customRender: "sjdxms" },
        key: "sjdxms",
    },
    { title: "数据表名称", dataIndex: "sjdxmc", key: "sjdxmc" },
    {
        title: "业务类型",
        slots: { customRender: "ywlxmc" },
        key: "ywlxmc",
    },
    {
        title: "匹配数据状态",
        key: "ismatch",
        slots: { customRender: "ismatch" },
    },
    { title: "创建时间", dataIndex: "time", key: "time", sorter: true },
    {
        title: "操作",
        key: "operation",
        slots: { customRender: "operation" },
        width: 240,
    },
];

export default defineComponent({
    name: "AddressMatch",
    setup() {
        const formState = reactive<FormState>({
            sjyid: "",
            ywlxid: "",
            sjdxmc: "",
            sjdxms: "",
            sjylx: "",
            sjyfl: "",
            pageSize: 10,
            pageNum: 1,
            orderByColumn: "",
            isAsc: "asc",
            isprehandle: "1",
        });
        const { total, repositories, getUserRepositories } =
            useRepositoryNameSearch(formState);
        const store = reactive({
            tableLoading: false,
            loading: false,
            visible: false,
            title: "",
            type: 1,
            row: {},
            userList: [],
            tableNameList: [],
            dataSource: [] as any[],
            createColumns: [] as any[],
            onSearchList(formState: FormState) {
                store.tableLoading = true;
                formState = formState;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            handleTableChange(
                pagination: any,
                filter: TableStateFilters,
                sorter: any
            ) {
                store.tableLoading = true;
                formState.pageNum = pagination.current;
                if (sorter && sorter.order) {
                    formState.isAsc =
                        sorter.order === "ascend" ? "asc" : "desc";
                    formState.orderByColumn = sorter.field;
                }
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onHandleConfirm(form: any) {
                store.loading = true;
                switch (store.type) {
                    case 1:
                        API.edit(form).then(({ msg }) => {
                            getUserRepositories();
                            store.loading = false;
                            store.visible = false;
                            message.success(msg);
                        });
                        break;
                    case 2:
                        API.addData(form).then(({ msg }) => {
                            getUserRepositories();
                            store.loading = false;
                            store.visible = false;
                            message.success(msg);
                        });
                        break;
                    default:
                        break;
                }
            },
            onHandleCancel() {
                store.loading = false;
                store.visible = false;
            },
            onPreview(sjdxmc: string) {
                API.dataPreview_v(sjdxmc).then(({ data }) => {
                    store.createColumns = [];
                    for (let i = 0; i < data.keySet.length; i++) {
                        const e = data.keySet[i];
                        let createObject = Object.assign({
                            title: e,
                            dataIndex: e,
                            key: e,
                        });
                        store.createColumns.push(createObject);
                    }
                    for (let t = 0; t < data.dataList.length; t++) {
                        const x = data.dataList[t];
                        const createID = Object.assign(x, {
                            customId: t,
                        });
                        store.dataSource.push(createID);
                    }
                    store.loading = false;
                    store.visible = true;
                    store.title = "数据预览";
                    store.type = 3;
                });
            },
            onHandleMatch(id: string) {
                API.addressMatchApi(id).then(({ msg }) => {
                    getUserRepositories();
                    message.success(msg);
                });
            },
        });
        return {
            total,
            formState,
            repositories,
            columns,
            tagColor,
            onHandleCode,
            ...toRefs(store),
        };
    },
    components: {
        SnippetsOutlined,
        Search,
        Modal,
        Test,
    },
});
</script>